<template>
	<image :class="'mui-icon '+(spin ? 'icon-rotate' : '')+' '+mClass" :style="_innerStyles+mStyle"
		:src="base64Content"></image>
</template>

<script>
	var momouiRootPath = '@/components/mui/';
	var customizedIconsPath = void 0;
	/* eslint-disable */
	var app = getApp();
	/* eslint-disable */
	if (app.momouiRootPath) {
		momouiRootPath = app.momouiRootPath;
	}
	if (app.customizedIconsPath) {
		customizedIconsPath = app.customizedIconsPath;
	}
	var muiIconPath = 'styles/static/icons/';
	export default {
		name: "mui-icon",
		props: {
			mClass: {
				type: String,
				default: ''
			},
			mStyle: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: null
			},
			customized: {
				type: Boolean,
				default: false
			},
			disableThemeWatcher: {
				type: Boolean,
				default: false
			},
			name: {
				type: String,
				default: 'svg'
			},
			progressProps: {
				type: Object,
				default: {
					disableShrink: false,
					value: 0,
					variant: 'indeterminate'
				}
			},
			rerender: {
				type: null,
				default: null
			},
			size: {
				type: Number,
				default: null
			},
			spin: {
				type: Boolean,
				default: false
			},
			src: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				base64Content: '',
				_innerStyles: 'width:24px;height:24px;'
			}
		},
		mounted() {
			var _this = this;
			var _data = _this.$props,
				name = _data.name,
				color = _data.color,
				size = _data.size,
				src = _data.src,
				customized = _data.customized;
			var _name = name;
			if (typeof name === 'string' && (name === 'false' || name === 'null' || name === 'undefined')) {
				_name = '';
			}
			_this._Pretreatment(_name, color, size, src, customized);
		},
		methods: {
			_Pretreatment: function _Pretreatment(name, color, size, src, customized) {
				var _this2 = this;
				var selectQuery = uni.createSelectorQuery().in(this);
				if (name && !src) {
					if (color && size) {
						this._ReadSvgAndGenBase64(name, color, size + 'px', customized);
					} else {
						selectQuery.select('.mui-icon').fields({
							computedStyle: ['color', 'fontSize']
						}, function(res) {
							var _ref = res || {},
								queryColor = _ref.color,
								querySize = _ref.fontSize;

							queryColor = queryColor || 'currentColor';
							querySize = querySize || '24px';
							var realColor = color || queryColor;
							var realSize = size ? size + 'px' : querySize;
							_this2._ReadSvgAndGenBase64(name, realColor, realSize, customized);
						}).exec();
					}
				} else if (src) {
					selectQuery.select('.mui-icon').fields({
						computedStyle: ['fontSize']
					}, function(res) {
						var _ref2 = res || {},
							querySize = _ref2.fontSize;

						querySize = querySize || '24px';
						var realSize = size ? size + 'px' : querySize;
						var _innerStyles = 'width:' + realSize + ';height:' + realSize + ';';
						_this2.$data._innerStyles=_innerStyles;
						_this2.$data.base64Content=src
						// _this2.$set(_this2.$data, '_innerStyles', _innerStyles);
						// _this2.$set(_this2.$data, 'base64Content', src);

					}).exec();
				}
			},
			_ReadSvgAndGenBase64: function _ReadSvgAndGenBase64(iconName, color, size, customized) {
				if (iconName) {
					var iconPath = customized ? '' + (customizedIconsPath || '') + iconName : '' + momouiRootPath +
						muiIconPath + iconName;
					if (iconPath.substr(-4) !== '.svg') {
						iconPath = iconPath + '.svg';
					}
					try {
						// #ifdef MP-WEIXIN
						var fileRes = wx.getFileSystemManager().readFileSync(iconPath, 'binary');
						// #endif
						// #ifndef MP-WEIXIN
						var fileRes = null;
						// #endif
						if (fileRes) {
							var svgdata = String(fileRes);
							var dstr = '<svg';
							var svgStartIndex = svgdata.indexOf(dstr);
							var styleIndex = svgdata.indexOf('>', svgStartIndex);
							var insertStyle =
								'\n              <style type="text/css">\n                path { fill: ' + color +
								'; }\n            ';
							if (iconName === 'loading') {
								var progressProps = this.data.progressProps;

								insertStyle =
									'\n                <style type="text/css">\n                  circle {\n                    stroke: ' +
									color + ';\n              ';
								if (progressProps.disableShrink) {
									insertStyle = insertStyle +
										'\n                    animation: none;\n                ';
								} else {
									insertStyle = insertStyle + '\n                    ' + (progressProps.variant !==
										'indeterminate' ?
										'transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms' :
										'animation: mui-circular-progress-keyframes-circular-dash 1.4s ease-in-out infinite'
									) + ';\n                ';
								}
								insertStyle = insertStyle + '\n                  ' + (progressProps.variant ===
										'indeterminate' ? 'stroke-dasharray: 80px, 200px;stroke-dashoffset: 0px' :
										'stroke-dasharray: 126.92;stroke-dashoffset: ' + (126.92 - (progressProps
											.value || 0) / 100 * 126.92).toFixed(2) + 'px') +
									';\n                }\n              ';
							}
							insertStyle = '\n                ' + insertStyle +
								'\n              </style>\n            ';
							svgdata = '' + svgdata.slice(0, styleIndex + 1) + insertStyle + svgdata.slice(styleIndex +
								1);
							var base64 = new _base2.default();
							var svgtobase64 = base64.encode(svgdata);
							var base64Content = 'data:image/svg+xml;base64,' + svgtobase64;
							var _innerStyles = 'width:' + size + ';height:' + size + ';';
							this.setData({
								base64Content: base64Content,
								_innerStyles: _innerStyles
							});
						}
					} catch (e) {
						console.log(e);
					}
				}
			}
		},

		computed: {
			params() {

				const {
					name,
					color,
					size,
					src,
					customized,
					mClass,
					mStyle,
					progressProps,
					rerender
				} = this;
				return {
					name,
					color,
					size,
					src,
					customized,
					mClass,
					mStyle,
					progressProps,
					rerender
				}
			}
		},
		watch: {
			params: {
				handler(val) {
					var _name = val.name;
					if (typeof name === 'string' && (name === 'false' || name === 'null' || name === 'undefined')) {
						val._name = '';
					}
					this._Pretreatment(val)
				},
				immediate: false,
			}
		},
		options: {
			virtualHost: true,
			pureDataPattern: /^_pure/,
			styleIsolation: 'apply-shared'
		},
	}
</script>

<style>

</style>